

<template>
  <div>
    <a-divider  />
    <a-descriptions title="用户信息">
      <a-descriptions-item label="用户名">{{ user.name }}</a-descriptions-item>
      <a-descriptions-item label="真实姓名">{{ user.realName ? user.realName  : '未填写'}}</a-descriptions-item>
      <a-descriptions-item label="联系电话">{{ user.phoneNumber }}</a-descriptions-item>
    </a-descriptions>
    <a-form
        ref="formRef"
        :model="user"
        :rules="rules"
    >
      <a-form-item label="绑定物业公司" name="propertyId">
        <a-select
            v-model:value="user.propertyId"
            show-search
            placeholder="请选择物业进行绑定"
            :options="propertyData"
            :listHeight="60"
            :filter-option="filterPropertyOption"
        >
        </a-select>
      </a-form-item>
      <div class="endFunction">
        <a-button type="primary" @click="submit">绑定</a-button>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">

    import useAllocateProperty from "@/hooks/useAllocateProperty";
    import type {User} from "@/interface/User";


    let emit = defineEmits(['sendPropertyId'])

    interface Props {
        user : User,
        open: boolean
    }


   let communication =  withDefaults(defineProps<Props>(),{

   });


    function submit() {
      formRef.value.validate().then(() => {
        emit('sendPropertyId',communication.user.propertyId);
      });
    }



    const { propertyData , filterPropertyOption , formRef , rules } = useAllocateProperty(communication.user);

</script>

<style scoped lang="scss">
    .endFunction {
      display: flex;
      justify-content: flex-end;
      margin: 80px 0 0 0;
    }

</style>
